<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/sys-admin/home' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <template>

      <div class="pd-10">

        <el-button class="ml-5" icon="el-icon-delete" type="success">批量删除</el-button>

        <el-input style="width: 200px;    margin-left: 40px;" v-model="name"  placeholder="请输入商品名称"></el-input>
        <el-button class="ml-5" icon="el-icon-search" type="primary " @click="load();">搜索</el-button>



      </div>


      <el-table
          :data="tableData"
          border
          style="width: 100%;position: relative;margin-top: 20px;">

        <!--        <el-table-column-->
        <!--            header-align="center"-->
        <!--            show-overflow-tooltip-->
        <!--            prop="id"-->
        <!--            label="ID"-->
        <!--            width="60">-->
        <!--        </el-table-column>-->

        <el-table-column
            header-align="center"
            show-overflow-tooltip
            prop="pname"
            label="商品名"
            width="100">
        </el-table-column>

        <el-table-column
            header-align="center"
            align="center"
            prop="price"
            label="价格"
            width="60">
        </el-table-column>

        <el-table-column
            header-align="center"
            align="center"
            prop="inventory"
            label="库存"
            width="60">
        </el-table-column>

        <el-table-column
            header-align="center"
            align="center"
            prop="url"
            label="图片"
            width="120">

          <template slot-scope="scope">
            <img :src="'http://localhost:9080/' + scope.row.url" alt="" style="width: 100px;height: 100px">
          </template>

        </el-table-column>

        <el-table-column
            header-align="center"
            prop="cid"
            label="分类"
            width="100">
        </el-table-column>


        <el-table-column
            header-align="center"
            align="center"
            prop="sort"
            label="排序优先级"
            width="100">
        </el-table-column>

        <el-table-column
            header-align="center"
            show-overflow-tooltip
            prop="introduction"
            label="详细信息">
        </el-table-column>

        <el-table-column header-align="center" label="操作" width="90">
          <template slot-scope="scope">
            <el-button @click="showEditFormDialog(scope.row)" type="primary" icon="el-icon-edit" circle
                       size="mini"></el-button>
            <el-button @click="openDeleteComfirm(scope.row)" type="danger" icon="el-icon-delete" circle
                       size="mini"></el-button>
          </template>
        </el-table-column>


      </el-table>

      <div class="pd-10">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </template>

    <!--  以下是修改相册弹出的框-->


    <el-dialog title="修改商品基本信息" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" :rules="rules">
        <el-form-item label="商品名称" prop="pname" :label-width="formLabelWidth">
          <el-input v-model="editForm.pname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)" prop="price" :label-width="formLabelWidth">
          <el-input v-model="editForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库存/份" prop="inventory" :label-width="formLabelWidth">
          <el-input v-model="editForm.inventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序优先级" prop="sort" :label-width="formLabelWidth">
          <el-input v-model="editForm.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品详情" :label-width="formLabelWidth">
          <el-input v-model="editForm.introduction" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品类别" prop="cid" :label-width="formLabelWidth">
          <el-select v-model="editForm.cid" placeholder="请选择商品类别">
            <el-option label="生鲜" value="生鲜"></el-option>
            <el-option label="蔬果" value="蔬果"></el-option>
            <el-option label="冷藏" value="冷藏"></el-option>
            <el-option label="粮油" value="粮油"></el-option>
            <el-option label="零食" value="零食"></el-option>
            <el-option label="休闲食品" value="休闲食品"></el-option>
            <el-option label="日用品" value="日用品"></el-option>
            <el-option label="健康美容" value="健康美容"></el-option>
            <el-option label="纸质品" value="纸质品"></el-option>
            <el-option label="清洁用品" value="清洁用品"></el-option>
            <el-option label="其他杂货" value="其他杂货"></el-option>
            <el-option label="调料" value="调料"></el-option>
            <el-option label="酒水" value="酒水"></el-option>
            <el-option label="饮料" value="饮料"></el-option>
            <el-option label="香烟" value="香烟"></el-option>
            <el-option label="文具办公用品" value="文具办公用品"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm()">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>


<script>
export default {
  data() {
    return {
      name:'',
      pageNum: 1,
      pageSize: 2,
      url: '',
      total:0,
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      editForm: {
        pname: '',
        price: '',
        inventory: '',
        sort: '',
        introduction: '',
        cid: ''
      },
      options: [{
        label: '食品分类',
        options: [{
          value: '生鲜', label: '生鲜'
        }, {
          value: '蔬果', label: '蔬果'
        }, {
          value: '冷藏', label: '冷藏'
        }, {
          value: '粮油', label: '粮油'
        }, {
          value: '零食', label: '零食'
        }, {
          value: '休闲食品', label: '休闲食品'
        }]
      }, {
        label: '百货区',
        options: [{
          value: '日用品', label: '日用品'
        }, {
          value: '健康美容', label: '健康美容'
        }, {
          value: '纸质品', label: '纸质品'
        }, {
          value: '清洁用品', label: '清洁用品'
        }, {
          value: '其他杂货', label: '其他杂货'
        }]
      }, {
        label: '酒水调料区',
        options: [{
          value: '调料', label: '调料'
        }, {
          value: '酒水', label: '酒水'
        }, {
          value: '饮料', label: '饮料'
        }, {
          value: '香烟', label: '香烟'
        }]
      }, {
        label: '文具办公区',
        options: [{
          value: '文具办公用品', label: '文具办公用品'
        }]
      }],
      rules: {
        pName: [
          {required: true, message: '请输入商品名称', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入商品价格', trigger: 'blur'},
          {pattern: /^(\-)*(\d+)\.(\d\d).*$/, min: 1, max: 5, message: '请输入一个1-99999的两位小数', trigger: 'blur'}
        ],
        inventory: [
          {required: true, message: '请输入商品库存', trigger: 'blur'},
          {pattern: /^[1-9][0-9]*$/, min: 1, max: 5, message: '请输入一个1-99999的整数', trigger: 'blur'}
        ],
        cId: [
          {required: true, message: '请选择商品类别', trigger: 'blur'},
          {min: 1, max: 1, message: '请在下拉框中选择合适的类别', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序优先级', trigger: 'blur'},
          {pattern: /^(\d{1}|[1-9]{1}[0-9]{1})$/, message: '请输入1-99之间的数', trigger: 'blur'}
        ]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {

    submitEditForm() {
      let url = 'http://localhost:9080/products/' + this.editForm.id + '/update';
      console.log('url=' + url);

      let formData = this.qs.stringify(this.editForm);

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改商品成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.loadProductList();

        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
              this.loadProductList();
            }
          });
        } else if (jsonResult.state == 40900) {
          this.$message.error("商品名称重复！");
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
    showEditFormDialog(product) {
      // this.dialogFormVisible = true;
      // this.editForm = product;

      let url = 'http://localhost:9080/products/' + product.id;
      console.log('url=' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.editForm = jsonResult.data;
          this.dialogFormVisible = true;
        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadProductList();
            }
          });
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },

    openDeleteComfirm(product) {

      let message = '此操作将永久删除【' + product.pname + '】商品，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDeleteProduct(product);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDeleteProduct(product) {
      let url = 'http://localhost:9080/products/' + product.id + '/delete';
      console.log('url=' + url);

      this.axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除【' + product.pname + '】成功!',
            type: 'success'
          });
          this.loadProductList();
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadProductList();
            }
          });
        }
      })
    },
    loadTotal(){
      let url = 'http://localhost:9080/products/total';
      console.log('url=' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.total = jsonResult.data;

          console.log(this.total)
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });

    },
    loadProductList() {

      let url = 'http://localhost:9080/products/page?pageNum='+this.pageNum+'&pageSize='+this.pageSize+'&pname='+this.name;
      console.log('url=' + url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableData = jsonResult.data;
          console.log(this.tableData)
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.loadProductList();
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum;
      this.loadProductList();
    },
    load(){
      this.loadTotal();
      this.loadProductList();
    }
  },
  mounted() {
    this.load();
  }
}
</script>